<template>
  <div id="map-container" class="map-container" style="height: 100%;width: 100%"/>
</template>

<script>
import {getCarByList} from '@/api/car'
import { createCarMarker } from '../../components/AmapView/libs/marker'
export default{

  data() {
    return {
      plugs:{}
    }
  },
  mounted(){
    this.intit()
    this.laodData()
  },

  methods: {
    laodData(){
      getCarByList().then(res=>{
        res.forEach(v=>{
           this.addMarker(v)
        })
      })
    },
    intit(){
      debugger
      this.mapObj = new AMap.Map('map-container', {
        zoom: 13,
        mapStyle: 'amap://styles/normal'// darkblue 极夜蓝  normal 标准 whitesmoke 远山黛 dark  幻影黑 light 月光银
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.CircleEditor'], () => {
        this.plugs.scale = new AMap.Scale()
        this.plugs.overView = new AMap.OverView()
        this.plugs.toolBarRuler = new AMap.ToolBar()
        this.mapObj.addControl(this.plugs.scale)
        this.mapObj.addControl(this.plugs.overView)
        this.mapObj.addControl(this.plugs.toolBarRuler)
        this.plugs.scale.hide()
        this.plugs.toolBarRuler.hide()
      })
    },
    addMarker(ob) {
      const marker = createCarMarker(this.mapObj, ob, this.controlStatus, this.onCarMenuClick, this.onCarMarkerClick)
      marker.tag = ob.id
      this.carMarkers.push(marker)
    }
  }
}
</script>

<style rel="stylesheet/scss">
  .map-container{

    width: 100%;

    height:100%;
  }
</style>

